先上图
图片地址 https://www.iconfont.cn/
.wxml
<view class='navs'>
<view class='nav-item'>
<image class="nav-image" src='/img/9.png' />
<text>代付款</text>
</view>
<view class='nav-item'>
<image class="nav-image" src='/img/7.png' />
<text>待收货</text>
</view>
<view class='nav-item'>
<image class="nav-image" src='/img/8.png' />
<text> 待评价</text>
</view>
<view class='nav-item'>
<image class="nav-image" src='/img/5.png' />
<text> 退货/换货</text>
</view>
<view class='nav-item'>
<image class="nav-image" src='/img/6.png' />
<text>全部订单</text>
</view>
</view>
.wxss
.navs {
padding-top: 35rpx;
display: flex;
}
.nav-item {
width: 300rpx;
display: flex;
align-items: center;
flex-direction: column;
/* padding: 20rpx; */
}
.nav-item .nav-image {
width: 55rpx;
height: 55rpx;
/* margin: 5rpx; */
}
.nav-item text {
margin-top: 20rpx;
font-size: 28rpx;
color: gray;
}